<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Image Gallery Plugin</title>

  <link rel="stylesheet" href="css/demo-styles.css" />
  <link rel="stylesheet" href="css/styles.css" />

</head>

<body>

<div class="demo-wrapper">

  <!--// Gallery Markup: A container that the plugin is called upon, and two lists for the images (use images with same aspect ratio) //-->
  <div id="gallery-container">
    
    <ul class="items--small">
      <li class="item"><a href="#"><img src="images/small-1.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-2.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-3.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-4.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-5.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-6.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-7.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-8.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-9.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-10.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-11.png" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small-12.png" alt="" /></a></li>
    </ul>
    <ul class="items--big">
      <li class="item--big"><a href="#"><img src="images/big-1.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-2.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-3.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-4.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-5.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-6.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-7.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-8.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-9.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-10.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-11.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big-12.jpg" alt="" /></a></li>
    </ul>
    <div class="controls">
      <span class="control icon-arrow-left" data-direction="previous"></span> 
      <span class="control icon-arrow-right" data-direction="next"></span> 
      <span class="grid icon-grid"></span>
      <span class="fs-toggle icon-fullscreen"></span>
    </div>
    
  </div>
  <p class="credit">Photographs &copy; of <a href="http://500px.com/asit">Achmed Asit</a></p>
  <p class="tips"> You can use the arrow keys to navigate between images in the slideshow view, and the shift key to switch back from slideshow to Grid view</p>
  <a href="https://github.com/SaraSoueidan/s-gallery-responsive-jquery-plugin" class="button"> Find Plugin on Github</a>
  <a href="http://sarasoueidan.com/blog/s-gallery-responsive-jquery-gallery-plugin-with-css3-animations" class="button"> Back to Article</a>

  

</div><!--end demo-wrapper-->

  <script src="js/jquery-1.8.2.min.js"></script>
  <script src="js/screenfull.min.js"></script>
  <script src="js/scripts.js"></script>
  <script>
    $(document).ready(function(){
      $('#gallery-container').sGallery({
        fullScreenEnabled: true
      });
    });
  </script>

</body>
</html>